<template>
	<view class="wrap">
		<view class="search">
			<view class="search-input">
				<i class="iconfont iconsousuo"></i>
				<input type="text" v-model='serach_value' placeholder="请输入关键词" placeholder-style='rgba(153, 153, 153, 1)' confirm-type="search" @confirm="search()"/>
			</view>
			<view :class="['search-type', showType === true ? 'title_active' : '']">
				<view @tap='changeType'>{{rescourcesTypename}}<i class="iconfont iconxiala"></i></view>
			</view>
		</view>
		<!-- 类型弹窗列表 -->
		<view class="typechange" v-show="showType" @tap="showType = false">
			<view>
				<view :class="[index == rescourcesTypeindex ? 'title_active': '']" v-for='(item,index) in rescourcesTypeList' :key='index'
				 @tap='selectRecoreces(item.type,index)'>
					{{item.type_name}}<text class="iconfont iconduigou" v-show='index == rescourcesTypeindex'></text>
				</view>
			</view>
		</view>
		
		<view class="not_data" v-if="rescources.length==0">
			<i class="iconfont iconzanwukecheng"></i>
			<view class="not_data_text">当前课堂暂无资源</view>
		</view>
		<view class="cont" v-else>
			<view class="item" v-for="(item,index) in rescources" :key="index" @tap="check(item)">
				<view class="itemTop">
					<view class="name">{{item.resource_name}}</view>
					<view class="fraction">
						<i v-show="item.resource_type == 1" class="iconfont iconshipinziyuan"></i>
						<i v-show="item.resource_type == 2" class="iconfont iconyinpinziyuan"></i>
						<i v-show="item.resource_type == 3" class="iconfont iconwendangziyuan"></i>
					</view>
				</view>
				<view class="itemBottom">
					<view class="state">{{item.resource_type == 1 ? '视频':item.resource_type == 2 ? '音频':item.resource_type == 3 ? '文档':'未知类型'}}</view>
					<view class="price">查看</view>
				</view>
			</view>
			<uni-load-more v-if="rescources.length >= 8" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				data: uni.getStorageSync('courseCont'), //课程相关数据
				showType: false, // 显隐资源弹窗
				rescourcesTypeList: [{
						type_name: '全部',
						type: ''
					},
					{
						type_name: '视频',
						type: 1
					},
					{
						type_name: '音频',
						type: 2
					},
					{
						type_name: '文档',
						type: 3
					}
				],
				rescourcesTypeindex: 0, // 资源选择索引
				rescourcesTypename: '全部', // 资源选择后的名称
				rescources:[], // 资源列表数据
				serach_value: '', // 绑定搜索值
				files_type: '',
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				}
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.reload = true;
			this.getData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getData()
			}, 500);
		},
		onLoad() {
			this.getData();
		},
		methods: {
			// 获取资源
			getData: function() {
				var result = {
					day: this.data.day,
					class_id: this.data.class_id,
					semester_week_id: this.data.semester_week_id,
					time_lesson_id: this.data.time_lesson_id,
					page: this.page,
					limit: 10
				}
				if(this.rescourcesTypeindex != 0){
					result.resource_type = this.rescourcesTypeList[this.rescourcesTypeindex]['type'];
				}
				if(this.serach_value!=''){
					result.resource_name = this.serach_value;
				}
				this.$kbapi.apiPost('mobile/courseResource/infos', result).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.list;
						this.rescources = this.reload ? list : this.rescources.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.rescources = [];
						} else {
							this.status = 'noMore';
						}
					}
				});
			},
			// 资源选择弹窗控制
			changeType() {
				this.showType = !this.showType
			},
			// 搜索框
			search() {
				this.page = 1;
				this.reload = true;
				this.rescources = [];
				this.getData();
			},
			// 选择资源类型
			selectRecoreces(type, index) {
				this.rescourcesTypename = this.rescourcesTypeList[index].type_name // 获取当前选择的类型
				this.rescourcesTypeindex = index // 获取当前选择的索引
				this.page = 1;
				this.reload = true;
				this.rescources = [];
				this.getData();
			},
			// 跳转查看资源详情
			check(item) {
				var type = item.resource_type == 3 ? 1 : Number(item.resource_type+1)
				uni.navigateTo({
					url: '../tongbu/resources_Detail?name='+item.resource_name+'&type='+type+'&src='+item.resource_file+'&state=0'
				})
			}
		},
		watch: {
			// 监听搜索
			serach_value(new_value, old_value) {
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}
	
	.not_data {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	
		i {
			margin-top: 270upx;
			font-size: 370upx;
			line-height: 340upx;
			color: rgba(194, 194, 194, 1);
		}
	
		.not_data_text {
			color: #999999;
			font-size: 42upx;
			line-height: 40upx;
			margin-top: 15upx;
			margin-left: 25upx;
		}
	
	}

	/* 搜索 */
	.search {
		position: fixed;
		top: 0;
		left: 0;
		padding: 20upx 30upx;
		width: calc(100% - 60upx);
		height: 56upx;
		display: flex;
		align-content: center;
		justify-content: space-between;
		background: #FFFFFF;
	
		// 搜索
		.search-input {
			background: rgba(250, 250, 250, 1);
			border-radius: 12upx;
			padding-left: 120upx;
			
			& i{
				position: absolute;
				margin-right: 20upx;
				line-height: 48upx;
			}
	
			input {
				padding-left: 40upx;
			}
		}
	
		// 类型选择容器
		.search-type {
			 & view{
				 font-size: 32upx;
				 display: flex;
				 align-items: center;
			 }
		}
		.title_active {
			color: #FF9900;
			& i {
				transform: rotate(180deg);
			}
		}
	
	}


	// 类型弹窗列表
	.typechange {
		position: fixed;
		left: 0;
		right: 0;
		top: 46px;
		bottom: 0;
		background: rgba(51, 51, 51, 0.4);
		z-index: 1;

		view {
			padding: 10px 20px;
			background: #FFFFFF;
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);

			text {
				position: absolute;
				right: 30upx;
			}
		}
		.title_active{
			color: #FF9900;
		}
	}

	.cont{
		margin-top: 126upx;
		background-color: #FAFAFA;
		z-index: 1;
		.item{
			width: 690upx;
			margin: 30upx auto 20upx;
			background-color: #FFFFFF;
			.itemTop{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30upx;
				.name{
					color: #333333;
					font-size: 36upx;
					line-height: 1.2;
				}
				.fraction{
					& i{
						color: #999999;
						font-size: 40upx;
						line-height: 1;
						margin-right: 10upx;
					}
					.iconyinpinziyuan{
						font-size: 50upx;
						line-height: 0.8;
					}
				}
			}
			.itemBottom{
				display: flex;
				justify-content: space-between;
				.state{
					display: flex;
					justify-content: flex-start;
					color: #666666;
					font-size: 28upx;
					line-height: 1.2;
					margin-left: 30upx;
					& view{
						margin-right: 20upx;
					}
				}
				.price{
					width: 114upx;
					height: 66upx;
					line-height: 66upx;
					text-align: center;
					background: rgba(255,153,0,0.1);
					border-radius: 17px 0px 4px 0px;
					color: #FF9900;
					font-size: 28upx;
				}
			}
		}
	}
</style>
